/*------------------------------------------------------------------
[Master Stylesheet]

Project:	    James - Landing Page Template
Version:	    1.0
Last change:	06/03/2015
Author:         Mat Przegietka 
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1.  Helper Classes
2.  Preloader
3.  Icons
4.  Navigation
5.  Homepage Content
6.  Icon Box
7.  Subsection Mockups
8.  Subsections
9.  Parallax Subsections
10. Newsletter Form
11. Contact Form
12. Inputs
13. Buttons
14. Buttons - Waves Effect

-------------------------------------------------------------------*/


/*--------------------------------------*/
/* 1. Helper Classes -------------------*/
/*--------------------------------------*/

.align-center {text-align:center}
.aligh-left {text-align:left}
.align-right {text-align:right}
.float-left {float:left}
.img_responsive {max-width: 100%}
.img-circle {border-radius: 50%}


/*--------------------------------------*/
/* 2. Preloader ------------------------*/
/*--------------------------------------*/

.preloader_header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
}

.preloader_loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.preloader_loader {
    bottom:20%;	
}

.preloader_header .preloader_inner {
    display: block;
    margin: 0 auto;
}

.preloader_header .preloader_loader svg path {
    fill: none;
    stroke-width: 6;
}


/* Animations */
/* Initial animation of header elements */

.loading .preloader_loader {
	opacity: 1;
	-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .preloader_loader {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

@-webkit-keyframes animInitialHeader {
	from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}

@keyframes animInitialHeader {
	from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}


/* Header elements when loading finishes */

.loaded .preloader_loader {
	opacity: 1;
}

.loaded .preloader_loader {
	-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}


/* Header animation when loading finishes */

.loaded .preloader_header {
	-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}


/* Content animations */

.loaded .top_bar,
.loaded .content_container h2,
.loaded .content_container h6,
.loaded .cta_button_area,
.loaded .social_icons_container
{
	animation: animLoadedContent 0.8s cubic-bezier(0.7,0,0.3,1) both;
    -webkit-animation: animLoadedContent 0.8s cubic-bezier(0.7,0,0.3,1) both;
}
 
.loaded .top_bar {
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
    
}

.loaded .content_container h2 {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;   
}

.loaded .content_container h6 {
    animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;   
}

.loaded .content_container .cta_button_area {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    
}

.loaded .social_icons_container {
    animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
    
}

@keyframes animLoadedContent {
    from { 
        opacity: 0; 
        transform: translate3d(0,200px,0);  
    }
}

@-webkit-keyframes animLoadedContent {
    from { 
        opacity: 0; 
        -webkit-transform: translate3d(0,200px,0);  
    }
}


/* Mockup animations */

.loaded .mockup-animation1,
.loaded .mockup-animation2
{
	animation: MockupAnimLoadedContent 0.7s cubic-bezier(0.5,.01,.51,1) both;
    -webkit-animation: MockupAnimLoadedContent 0.7s cubic-bezier(0.5,.01,.51,1) both;
}

.loaded .mockup-animation2 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;   
}

.loaded .mockup-animation1 {
    animation-delay: 1.35s;
    -webkit-animation-delay: 1.35s;   
}
 
@keyframes MockupAnimLoadedContent {
    from { 
        opacity: 0; 
        transform: translate3d(0,50px,0);  
    }
}

@-webkit-keyframes MockupAnimLoadedContent {
    from { 
        opacity: 0; 
        -webkit-transform: translate3d(0,50px,0);  
    }
}

.layout-switch .ip-header {
    position: absolute;
}

.header-none {
	display:none;
}


/* Subpage Mockups animations */

.content_anim1,
.content_anim2,
.content_anim3,
.content_anim4,
.content_anim5,
.content_anim6,
.content_anim7,
.content_anim8,
.content_anim9,
.content_anim10,
.content_anim11,
.content_anim12,
.content_anim13,
.content_anim14,
.content_anim15,
.content_anim16,
.content_anim17,
.content_anim18,
.content_anim19,
.content_anim20,
.content_anim21,
.content_anim22,
.content_anim23,
.content_anim24,
.content_anim25,
.content_anim26,
.content_anim27,
.content_anim28,
.content_anim29,
.content_anim30
 {opacity:0}


/*--------------------------------------*/
/* 3. Icons ----------------------------*/
/*--------------------------------------*/

.icon_big {
	font-size: 1.72rem;
	margin:1rem;	
}

.icon_normal {
	width: 2rem;
    font-size: 1.72rem;
}

.icon_small {
	margin:1rem;
	font-size:1.4rem;
	line-height:1.2rem;
	opacity:0.54;
	margin-right:2rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.icon_list {
	margin-bottom:1.72rem;
}

.icon_list li{
	vertical-align: middle;
    display: table;
}

.icon_list li div,
.icon_list li h6 {
	vertical-align: middle;
    display: table-cell; 
}


/*-- Social Icons --*/

.social_icon{
    font-size:1rem;
    line-height:1rem;
    opacity:0.5;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social_icon:hover {
    cursor:pointer;
    opacity:1;
}

.social_icons ul, .social_icons ul li {
	display: inline-block;
	list-style: none;
	padding: 0;
	height:2rem;
}

.social_icons ul li {
	margin-right: 0.7rem;
	margin-left: 0.7rem;
}

.social_icons ul li:first-child {
	margin-left:0;
}

.social_icons ul li:last-child {
	margin-right:0;
}

.social_icons ul li {
    float:left;
}

.social_icons_container {
	position: relative;
	width:100%;
    z-index: 10;
}


/*--------------------------------------*/
/* 4. Navigation -----------------------*/
/*--------------------------------------*/

.navigation_desktop ul {
    float:right;
    padding:0;
    margin:0;   
}

.navigation_desktop ul li {
    float:left;
    padding:0;
    height:auto;
    margin-left:1rem;
    margin-right:1rem;
}

.navigation_desktop ul li a {
	font-size: 0.857rem;
	line-height: 1.72rem;
	opacity: 0.5;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.navigation_desktop a:hover {
	opacity:1;
}

.navigation_desktop li a:focus, .navigation_desktop a:hover {
	outline:none;
	text-decoration: none;
}
.navigation_desktop ul li:nth-last-child(2)
.navigation_desktop ul li:last-child {
    margin-right:0rem;
}

.top_bar {
	position:relative;
    z-index: 10;
}


/*-- menu_bar --*/

.menu_bar {
	height:5.14rem;
	padding-top:1.7rem;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 1);
	-moz-box-shadow:    0px 0px 3px 0px rgba(50, 50, 50, 1);
	box-shadow:         0px 0px 3px 0px rgba(50, 50, 50, 1);
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	z-index:1000;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-transform: translateY(-105%);
	-moz-transform: translateY(-105%);
	transform: translateY(-105%);
}

.menu_bar-hide {
	height: 5.14rem;
	-webkit-transform: translateY(-105%);
	-moz-transform: translateY(-105%);
	transform: translateY(-105%);
}

.menu_bar-show {
	height: 5.14rem;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

.menu_bar_navigation ul {
    float:right;
    padding:0;
    margin:0;   
}

.menu_bar_navigation ul li {
    float:left;
    padding:0;
    height:auto;
    margin-left:1rem;
    margin-right:1rem;
}

.menu_bar_navigation ul li:nth-last-child(2),
.menu_bar_navigation ul li:last-child {
    margin-right:0rem;
}

.menu_bar_navigation ul li a {
	font-size: 0.857rem;
	line-height: 1.72rem;
	opacity: 0.5;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.menu_bar_navigation ul li a:hover {
	opacity:1
}

.menu_bar_navigation ul li.active a{
	opacity:1;
}

.menu_bar_navigation button {
	margin:0;
	margin-top:-0.5rem;
	margin-right:0 !important
}


/*-- Mobile Menu --*/

.cbp-spmenu {
	position: fixed;
	padding-top:3rem;
	background-color: #424242;
	-webkit-box-shadow: -1px 0px 7px 0px rgba(50, 50, 50, 1);
	-moz-box-shadow:    -1px 0px 7px 0px rgba(50, 50, 50, 1);
	box-shadow:         -1px 0px 7px 0px rgba(50, 50, 50, 1);
}

.cbp-spmenu a {
	display: block;
	font-size: 1.2rem;
	line-height: 1.72rem;
    text-decoration:none;
    text-align:left; 
    opacity:0.5;	
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.cbp-spmenu a:hover {
	margin-left:0.2rem;
    opacity:1;	
}

.cbp-spmenu-vertical {
	width: 200px;
	height: 100%;
	top: 0;
	z-index: 1001;
}

.cbp-spmenu-vertical a {
    padding:0.4rem;
    padding-left:2rem;
}

.cbp-spmenu-right {
	right: -210px;
}

.cbp-spmenu-right.cbp-spmenu-open {
	right: 0px;
}

.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}


/*-- Mobile Menu open & close buttons --*/

.mobile_menu_open_button {
	margin-top:0.5rem;
}

.mobile_nav_close_button {
	position:absolute;
	z-index: 100;
	right:2rem;
	top:3rem;
	border:0;
}

.mobile_nav_close_button a  {
	border:0;
	color:white;
	font-size:2rem !important;
    line-height:2rem;
    opacity:0.5 !important;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.mobile_nav_close_button a:hover  {
	opacity:1 !important;
	margin-left:0rem !important;
}

.mobile_nav_open_button a {
	border:0;
	color:white;
	font-size:2rem !important;
    line-height:2rem;
}

.mobile_nav_open_button {
	opacity:0.5;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.mobile_nav_open_button:hover {
	opacity:1
}

#mobile_menu_content {
    clear:both;
    box-shadow:none;
    -webkit-box-shadow: none;
}


/*--------------------------------------*/
/* 5. Homepage Content -----------------*/
/*--------------------------------------*/

html {
	overflow-x:hidden;
}

.logo {
	float:left
}

.hero_fullscreen {
	padding-top:3.428rem;
}


/*-- Main Content --*/

#main_content {
	display:table;
	overflow:hidden;
	height:120%;
	margin-top:-5.285rem;
}

.home_content {
	margin-top:-8rem;
}


#main_content h2, 
#main_content h6,
.cta_button_area {
	position:relative;
	z-index:2
} 

.content_container {
	display:table-cell;
	vertical-align: middle;
	z-index: 10;
}
.home_mockup {
	position:relative;
	display:block;
	text-align:center;
	float:right;
	display:none;
}

.home_mockup_image {
	position:absolute;
	right:0%;
	top:-23rem;
	width:100%
}


/*-- CTA Area --*/

.cta_button_area {
	margin-top:3.44rem;
}

.cta_button_area button{
	margin-bottom:1.72rem;
}

.cta_button_area a{
	opacity:0.5;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cta_button_area a:hover {
	opacity:1
}


/*-- Backgrounds --*/

#maximage_slider {
	z-index:0;
	opacity:0.4;
	display:none;
}

#maximage_video {
	z-index:0;
	opacity:0.6;
	display:none;
}

.mobile_novideo {
	top: 0;
	left: 0;
	position: absolute;
	width:100%;
	height:100%;
}

#maximage_video{
	background:url('../video/video.jpg') no-repeat 0 0; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#maximage_single {
	z-index:0;
	display:none;
}

video, object {
	top:0;left:0;
	position:absolute;
	z-index:1;
	opacity:0.3;
}


/*-- Home Content Background and Content Variants --*/

.hero_fullscreen.mockups .home_mockup{ display:block }

.hero_fullscreen.background_slider #maximage_slider { display:block }
.hero_fullscreen.background_video #maximage_video { display:block }
.hero_fullscreen.background_single #maximage_single { display:block }


/*--------------------------------------*/
/* 6. IconBox --------------------------*/
/*--------------------------------------*/

.iconbox {
	overflow: auto;
	margin-bottom:1rem;
}

.iconbox_icon {
	float:left;
	width:3.5rem;
	font-size:2rem;
}

.iconbox_content {
	overflow: hidden;	
}

.iconbox_content h5 {
	margin-top:0;
}

.intro {
	padding-bottom:4rem;
}

.intro h3 {
	margin-top:0;
}


/*--------------------------------------*/
/* 7. Subsection Mockups ---------------*/
/*--------------------------------------*/

.mockup_container {
	position:relative;
	text-align:center;
	
}

.mockup_container img {
	position: absolute;
	top:0;
	left:0;	
}


/*--------------------------------------*/
/* 8. Subsections ----------------------*/
/*--------------------------------------*/

.subsection {
	padding-top:5rem;
	padding-bottom:5rem;
	position:relative;
	/*z-index:1;*/
}

.more_info_mockup {
	width:100%;
	text-align:center;
	padding-bottom:1rem;
}

#features {
	position:relative;
	z-index: 12;
}

#features .mockup_container {
	z-index:11;
}

#features_video.subsection,
#screenshots.subsection,
#footer.subsection {
	border-bottom:none;
}


/*-- features - video --*/

#features_video{
	position:relative;
	z-index: 12;	
}

#features_video .intro {
	padding-bottom:1rem;
}

.play { 
	text-align:center;
	background: url(../images/mockups/subsection_mockups/3.png) center no-repeat;
	background-size: 70%;
	margin-bottom:2rem;
}
.play a {margin:17rem auto; width:auto;}

iframe {border:none;}


/*-- screenshots gallery --*/

.shadow {
	-webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    margin-bottom:3rem;
    margin-left:1rem;
    margin-right:1rem; 
}

.owl-carousel-screenshots img {
  display: block;
  width: 95%;
  height: auto;
  margin-bottom:2rem;
}


/*-- footer --*/

#footer.subsection {
	padding-top:2rem;
	padding-bottom:0.9rem;
}

#footer small {
	font-weight: 300
}


/*--------------------------------------*/
/* 9. Parallax Subsections -------------*/
/*--------------------------------------*/

.subsection_parallax {
	padding-top:7rem;
	padding-bottom:7rem;
	position:relative;
	z-index:1;
}

#reviews {
	background: url(../images/reviews_background.jpg) repeat-y 0 0  fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
  	background-size: cover;
  	color:white;
}

.single_review img{
	max-width:6rem;
	height:6rem;
	margin-right:3rem;
	float:left;
}
.review_content {
	overflow:hidden;
}

.review_content p {
	padding-top:2rem;
}

.reviews_logo img {
	width:90%
}

#newsletter {
	background: url(../images/newsletter_background.jpg) repeat-y 0 0  fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
  	background-size: cover;
  	color:white;
}

@media only screen and (max-device-width: 768px){
	#reviews, #newsletter { 
	-webkit-background-size: initial;
	-moz-background-size: initial;
	-o-background-size: initial;
  	background-size: initial;
	}
}


/*--------------------------------------*/
/* 10. Newsletter Form ------------------*/
/*--------------------------------------*/

.newsletter_form{
	position:relative;
	width:auto;
	z-index: 10;	
}

.newsletter_form .input-field {
	width:25rem;
	display:inline-block;
	margin-bottom:1.2rem;
}

.newsletter_form button {	
	margin-bottom:2.1rem;
	margin-left:2rem;
}

#preview p {
    margin:0;
    line-height:0.8rem;
}

#preview {
	opacity:0;
	display:block;
	position:absolute;
	width:100%;	
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#preview.show_message {
	opacity:1;
	animation: animLoadedContent 0.8s cubic-bezier(0.7,0,0.3,1) both;
    -webkit-animation: animLoadedContent 0.8s cubic-bezier(0.7,0,0.3,1) both;
}

.unhappyMessage {
    display:  block;
    position: absolute;
    margin-left:3rem;
    font-size:0.8rem;
    line-height: 0.8rem;
    margin-top:0;
    padding-top:-10px;
    color:#F44336;  
}


/*--------------------------------------*/
/* 11. Contact Form --------------------*/
/*--------------------------------------*/

.contact_form .input-field {
	margin-bottom: 1.72rem;
}

/*-- CONTACT FORM MESSAGE STYLING --*/

#message {
    display:none;
    position: fixed;
    z-index:3000;
    width:40rem;
    top:50%;
    left:50%;
    margin-top:-8.5rem;
    margin-left:-20rem;
    text-align:center;  
}

#alert {
	display:table-cell;
	vertical-align: middle;
    padding-bottom:2rem;
    padding-top:2rem;
    padding-left:2rem;
    padding-right:2rem;
}

.alert_icon {
	font-size:2rem;
	color:white;
}

.unordered li {
    margin:0 !important;
}

.contact_icon {
	font-size:2rem;
	margin-top:4rem;
	margin-bottom:1rem;
}

#message.warning {
	background:#F44336;
}

#message.success {
	background:#4CAF50;
}


/*--------------------------------------*/
/* 12. Inputs ---------------------------*/
/*--------------------------------------*/

.input-field {
	position: relative; 
}

.input-field label {
    opacity:0.7;
    position: absolute;
    top: 0.8rem;
    left: 0rem;
    font-size: 1rem;
    cursor: text;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out; 
}

.input-field label.active {
    font-size: 0.8rem;
    opacity:0.7;
    -webkit-transform: translateY(-130%);
    -moz-transform: translateY(-130%);
    -ms-transform: translateY(-130%);
    -o-transform: translateY(-130%);
    transform: translateY(-130%); 
}

.input-field input[type=text].valid,
.input-field input[type=password].valid,
.input-field input[type=email].valid,
.input-field input[type=date].valid,
.input-field textarea.valid {
    border-bottom: 1px solid #4CAF50;
    -webkit-box-shadow: 0 1px 0 0 #4CAF50;
    -moz-box-shadow: 0 1px 0 0 #4CAF50;
    box-shadow: 0 1px 0 0 #4CAF50; 
}

.input-field input[type=text].invalid,
.input-field input[type=password].invalid,
.input-field input[type=email].invalid,
.input-field input[type=date].invalid,
.input-field textarea.invalid {
    border-bottom: 1px solid #F44336;
    -webkit-box-shadow: 0 1px 0 0 #F44336;
    -moz-box-shadow: 0 1px 0 0 #F44336;
    box-shadow: 0 1px 0 0 #F44336;
}
       
.input-field .prefix {
    position: absolute;
    width: 2rem;
    top:1rem;
    font-size: 1.72rem;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -o-transition: color 0.2s;
    -ms-transition: color 0.2s;
    transition: color 0.2s; 
}

.input-field .prefix ~ input,
.input-field .prefix ~ textarea {
    margin-left:3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

.input-field .prefix ~ textarea {
    padding-top: 0.8rem; 
}

.input-field .prefix ~ label {
    margin-left: 3rem; 
}
    
input[type=text],
input[type=password],
input[type=email],
input[type=date],
textarea {
	background-color: transparent;
	border: none;
	outline: none;
	height: 3rem;
	width: 50%;
	font-size: 1rem;
	margin: 0 0 15px 0;
	padding: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

textarea {
	overflow-y: hidden;
	/* prevents scroll bar flash */
	padding: 1.6rem 0;
	/* prevents text jump on Enter keypress */
	resize: none;
}

.hiddendiv {
	display: none;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	/* future version of deprecated 'word-wrap' */
	padding-top: 1.2rem;
	/* prevents text jump on Enter keypress */
}

 
/*--------------------------------------*/
/* 13. Buttons --------------------------*/
/*--------------------------------------*/ 
 
.btn,
.btn-large,
.btn-flat {
	display: inline-block;
	height: 2.57rem;
	margin-bottom: 15px;
	padding: 0 1.5rem;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background-clip: padding-box;
	line-height: 2.57rem;
	text-transform: uppercase;
	border: none;
	-webkit-tap-highlight-color: transparent;
}

.btn.disabled,
.disabled.btn-large,
.btn-floating.disabled,
.btn-large.disabled,
.btn:disabled,
.btn-large:disabled,
.btn-large:disabled,
.btn-floating:disabled {
	background-color: #DFDFDF;
	box-shadow: none;
	color: #9F9F9F; 
}
  
.btn.disabled:hover, 
.disabled.btn-large:hover, 
.btn-floating.disabled:hover, 
.btn-large.disabled:hover, 
.btn:disabled:hover, 
.btn-large:disabled:hover, 
.btn-large:disabled:hover, 
.btn-floating:disabled:hover {
	background-color: #DFDFDF;
	color: #9F9F9F; 
}

.btn i,
.btn-large i,
.btn-floating i,
.btn-large i,
.btn-flat i {
	font-size: 1rem;
	line-height: inherit; 
}

.btn,
.btn-large {
	text-decoration: none;
	color: #FFF;
	text-align: center;
	letter-spacing: 0.8px;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	cursor: pointer;
}

.btn-flat {
	box-shadow: none;
	background-color:rgba(255, 255, 255, .1);
	color: white;
	cursor: pointer;
}
  
.btn-flat.disabled {
	color: white;
}

.btn-large {
	height: 54px;
	line-height: 56px;
}
.btn-large i {
	font-size: 1.6rem; 
}

/*--------------------------------------*/
/* 14. Buttons - Waves Effect -----------*/
/*--------------------------------------*/

.waves-effect {
	position: relative;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: all 650ms ease;
	-moz-transition: all 650ms ease;
	-o-transition: all 650ms ease;
	-ms-transition: all 650ms ease;
	transition: all 650ms ease;
}
.waves-effect .waves-ripple {
	position: absolute;
	pointer-events: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-clip: padding-box;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.25;
	background-color: rgba(0, 0, 0, 0.2);
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	transition-property: transform, opacity;
	-webkit-transition-duration: 700ms;
	-moz-transition-duration: 700ms;
	-o-transition-duration: 700ms;
	transition-duration: 700ms;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	will-change: transform, opacity;
}

.waves-effect.waves-light .waves-ripple { background-color: rgba(255, 255, 255, 0.35); }
.waves-effect.waves-red .waves-ripple { background-color: rgba(244, 67, 54, 0.65); }
.waves-effect.waves-yellow .waves-ripple { background-color: rgba(255, 235, 59, 0.65); }
.waves-effect.waves-orange .waves-ripple { background-color: rgba(255, 152, 0, 0.65); }
.waves-effect.waves-purple .waves-ripple { background-color: rgba(156, 39, 176, 0.65); }
.waves-effect.waves-green .waves-ripple { background-color: rgba(76, 175, 80, 0.65); }
.waves-effect.waves-teal .waves-ripple { background-color: rgba(0, 150, 136, 0.65); }

.waves-notransition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important; 
}

.waves-button,
.waves-icon {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
}

.waves-button, 
.waves-button:hover, 
.waves-button:visited, 
.waves-button:link, 
.waves-button-input {
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: none;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	z-index: 1; 
}

.waves-button-input {
	margin: 0;
	padding: 10px 15px;
}

.waves-input-wrapper {
	border-radius: 2px;
	vertical-align: bottom; 
}

.waves-input-wrapper.waves-button {
    padding: 0;
}
.waves-input-wrapper
.waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.waves-circle {
	text-align: center;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	border-radius: 50%;
}

.waves-float {
	-webkit-mask-image: none;
	-webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
}
.waves-float:active {
    -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}

.waves-block {
    display: block; 
}

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, ul.side-nav.full, ul.side-nav.fixed, .shadow {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover, .modal {
	-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); 
}

.z-depth-2, .shadow:hover {
	-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

.z-depth-3 {
	-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
}

.z-depth-4 {
	-webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	-moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); 
}

.z-depth-5 {
	-webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
	-moz-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
	box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); 
}
	
 
 /* Remove Focus Boxes */
select:focus {
    outline: 1px solid #f8c1c3;
}

button:focus {
    outline: none;
}

label {
	font-size: 0.8rem;
	color: #9e9e9e;
} 
  






